<template>
	<view class="detail">
		<!-- 图片结构 start -->
		<view class="nav-img">
			<view class="img-box">
				<image :src="list.large_img" mode="widthFix" class="img"></image>
			</view>
		</view>
		<!-- 图片结构 end -->

		<view class="section">
			<!-- 标题 -->
			<view class="section-title-box">
				<view class="section-title-left">
					<view class="section-name">
						{{list.name}}
					</view>

				</view>
				<view class="section-title-right">
					{{list.price}}
				</view>

			</view>
			<!--  -->
			<view class="section-enname">
				{{list.enname}}
			</view>
			<!-- 标题 -->
			<!-- 类型 -->
			<view class="section-box">

				<view class="section-type" v-for="(item,index) in list.arr" :key="index">
					<view class="section-type-left">
						{{item.title}}
					</view>
					<view class="section-type-right">
						<view class="section-type-right-item" v-for="(v,i) in item.arr" :key="i" @click="add(item,i)">
							<view :class="{active:i==item.activeIndex}">
								{{v.title}}
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 类型 -->
			<!-- 添加数量 -->
			<view class="section-num">
				<view class="section-num-left">
					添加数量
				</view>
				<view class="section-num-right">
					<u-number-box v-model="value"></u-number-box>
				</view>
			</view>
			<!-- 添加数量 -->
			<!-- 商品 描述 -->
			<view class="foot">
				<view class="foot-title">
					商品描述
				</view>
				<view class="foot-text-box">
					<view class="foot-item" v-for="(items,indexs) in list.desc ">
						{{indexs+1}}.{{items}}
					</view>
				</view>
			</view>
			<!-- 商品 描述 -->
		</view>
		<!-- 底部 结构 -->
		<view class="footer">
			<view class="foot-left">
				<view class="icon-box">
					<u-badge type="error" :count="count" class="counts"></u-badge>
					<u-icon name="bag-fill" size="40"></u-icon>
					<view class="icon-text">
						购物袋
					</view>
				</view>
				<view class="icon-box">
					<u-icon name="heart-fill" size="40" @click="addWish" :style="{'color':(isWish?'#6a91ec':'')}">
					</u-icon>
					<view class="icon-text">
						收藏
					</view>
				</view>
			</view>
			<view class="foot-right">
				<button type="default" class="btn_1 btn" @click="getProduct">加入购物袋</button>
				<button type="default" class="btn_2 btn">立即购买</button>
			</view>
		</view>
		<!-- 底部 结构 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				value: 1,
				count: 0,// 购物车数量
				ruleList: [],
				pid: '',
				isWish: false, // 收藏
			}
		},
		onLoad(option) {
			this.pid = option.pid
			this.getDetail(option.pid)
			this.useFindLike()
			this.useGetCarCount()
		},
		methods: {
			// 获取购物车数量
			useGetCarCount(){
				this.$request({
					url:'/shopcartCount',
					success:res =>{
						if(res.data.code == 4000){
							this.count = res.data.result
						}
					}
				})
			},
			// 根据商品pid查询收藏商品
			useFindLike(){
				this.$request({
					url:'/findlike',
					data:{
						pid:this.list.pid
					},
					success:res=>{
					}
				})
			},
			// 收藏/取消
			addWish() {
				this.isWish = !this.isWish
				// 收藏
				if (this.isWish) {
					this.$request({
						url: '/like',
						method: 'POST',
						data: {
							'pid': this.list.pid
						},
						success: res => {
							if(res.data.code ==  800){
								uni.showToast({
								    title: '收藏成功',
								    duration: 2000,
									icon:'none'
								})
							}
						}
					})
				} else { // 取消
					this.$request({
						url: '/notlike',
						method: 'POST',
						data: {
							'pid': this.list.pid
						},
						success: res => {
							if(res.data.code ==  900){
								uni.showToast({
								    title: '操作成功',
								    duration: 2000,
									icon:'none'
								})
							}
						}
					})
				}
			},
			// 获取详情
			getDetail(pid) {
				uni.request({
					url: "http://www.kangliuyong.com:10002/productDetail",
					data: {
						appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
						pid,
					},
					success: (res) => {
						let data = res.data.result[0]
						let typeList = ['cream', 'milk', 'sugar', 'tem']
						let arr = []
						typeList.forEach(v => {
							if (!data[v]) {
								return
							}
							let caption = {
								title: data[`${v}_desc`],
								activeIndex: 0,
								arr: []
							}
							let teamArray = data[v].split('/')
							teamArray.forEach(item => {
								let team = {
									title: item
								}
								caption.arr.push(team)
							})
							arr.push(caption)
							data.arr = arr

						})
						data.desc = data.desc.split(/\n/)
						this.list = data
						this.ruleIdea()
					}
				})
			},
			add(v, i) {
				if (v.activeIndex === i) {
					return
				}
				v.activeIndex = i
				this.ruleIdea()
			},
			//初始化
			ruleIdea() {
				this.ruleList = []
				this.list.arr.forEach(v => {
					this.ruleList.push(v.arr[v.activeIndex].title)
				})

			},
			// 添加购物车
			getProduct() {
				let rule = this.ruleList.join("/")
				this.$request({
					url: "/addShopcart",
					method: "POST",
					data: {
						pid: this.pid,
						count: this.value,
						rule
					}
				})
			},

		},
	}
</script>
<style lang="less" scoped>
	.detail {
		background-color: #f2f2f2;

		//图片 样式
		.nav-img {
			.img-box {
				width: 100%;

				.img {
					width: 100%;
					display: block;
				}
			}
		}

		//内容样式
		.section {
			position: relative;
			top: -60rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			margin: 30rpx;
			background-color: #fff;

			//第一行 标题样式
			.section-title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 40rpx 0;
				margin-bottom: 10rpx;

				.section-title-left {
					color: #646566;

					.section-name {
						font-size: 40rpx;
						font-weight: bold;
					}

				}

				.section-title-right {
					color: #0c34ba;
					font-size: 36rpx;
					font-weight: bold;
				}

			}

			//标题 英文样式
			.section-enname {
				color: #999;
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}

			//商品类型 样式
			.section-box {
				border-bottom: 2rpx solid #e8e8e8;
				padding-bottom: 30rpx;


				.section-type {
					margin-bottom: 30rpx;
					display: flex;

					.section-type-left {
						font-size: 34rpx;
						line-height: 60rpx;
						flex: 2.5;
					}

					.section-type-right {
						display: flex;
						justify-content: flex-start;
						flex: 7.5;

						.section-type-right-item {
							width: 120rpx;
							height: 60rpx;
							color: #646566;
							font-size: 28rpx;
							border-radius: 70rpx;
							margin-right: 30rpx;
							background-color: #e8e8e8;
							line-height: 60rpx;
							text-align: center;
						}
					}
				}
			}

			//
			.section-num {
				color: #646566;
				font-size: 34rpx;
				border-bottom: 2rpx solid #e8e8e8;
				padding-bottom: 40rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.section-num-left {}

				// 权重 
				.section-num-right {
					::v-deep .u-icon-plus {
						width: 50rpx !important;
						color: #fff !important;
						border-radius: 50%;
						background-color: #0c34ba !important;
					}

					::v-deep .u-icon-disabled {
						width: 50rpx !important;
						color: #b8c3eb !important;
						border: 2rpx solid #b8c3eb;
						border-radius: 50%;
					}

					::v-deep.u-icon-minus {
						width: 50rpx !important;
						color: #b8c3eb !important;
						border: 2rpx solid #b8c3eb;
						border-radius: 50%;
					}

					::v-deep .uni-input-input {
						background-color: #fff;
					}
				}
			}

			//
			.foot {
				margin: 50rpx 0;

				.foot-title {
					color: #646566;
					font-size: 34rpx;
					margin-bottom: 30rpx;
				}

				.foot-text-box {
					.foot-item {
						color: #999999;
						font-size: 30rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}

		.active {
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			font-size: 28rpx;
			border-radius: 70rpx;
			margin-right: 30rpx;
			background-color: #0c34ba;
			line-height: 60rpx;
			text-align: center;
		}

		.footer {
			height: 100rpx;
			padding: 0 20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			position: fixed;
			bottom: 0;
			left: 0;

			.foot-left {
				display: flex;

				.icon-box {
					position: relative;
					width: 100rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.counts {
						width: 25rpx;
						height: 25rpx;
						font-size: 5rpx;
						border-radius: 50%;
						top: -10rpx !important;
					}

					.icon-text {
						font-size: 32rpx;
						color: #999;
					}
				}
			}

			.foot-right {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.btn {
					width: 260rpx;
					height: 80rpx;
					color: #fff;
					font-size: 34rpx;
					border: none !important;
					border: 2rpx solid;
					text-align: center;
					line-height: 80rpx;
				}

				.btn_1 {
					border-radius: 60rpx 0 0 60rpx;
					background-color: #6a91ec;

				}

				.btn_2 {
					border-radius: 0 60rpx 60rpx 0;
					background-color: #0c34ba;
				}
			}
		}
	}
</style>
